*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    text-decoration: none;
    font-family: 'Poppins', sans-serif;
  }
  /* Navigation bar */
  .wrapper{
      background: #4a0604;
      position: fixed;
      width: 100%;
      border: 3px solid black;
      top: 0;
    }
    .wrapper nav{
      position: relative;
      display: flex;
      max-width: calc(100% - 200px);
      margin: 0 auto;
      height: 70px;
      align-items: center;
      justify-content: space-between;
    }
    nav .content{
      display: flex;
      align-items: center;
    }
    nav .content .links{
      margin-left: 80px;
      display: flex;
    }
    .content .logo1 a{
      color: #fff8dc;
      font-size: 29px;
      font-weight: 600;
    }
    .content .logo1 img{
      width: 65px;
      position: absolute;
      left: -78px;
      top: 0.5%;
    }
    .content .links li{
      list-style: none;
      line-height: 60px;
    }
    .content .links li a,
    .content .links li label{
      color: #fff8dc;
      font-size: 18px;
      font-weight: 750;
      padding: 9px 17px;
      border-radius: 5px;
      transition: all 0.3s ease;
    }
    .content .links li label{
      display: none;
    }
    .content .links li a:hover,
    .content .links li label:hover{
      background: #fff8dc;
      color: #4a0604;
    }
    .wrapper .search-icon,
    .wrapper .menu-icon{
      color: #fff8dc;
      font-size: 18px;
      cursor: pointer;
      line-height: 70px;
      width: 70px;
      text-align: right;
    }
    .wrapper .menu-icon{
      display: none;
    }
    .wrapper #show-search:checked ~ .search-icon i::before{
      content: "\f00d";
    }
    .wrapper .search-box{
      position: absolute;
      height: 100%;
      max-width: calc(100% - 50px);
      width: 100%;
      opacity: 0;
      pointer-events: none;
      transition: all 0.3s ease;
    }
    .wrapper #show-search:checked ~ .search-box{
      opacity: 1;
      pointer-events: auto;
    }
    .search-box input{
      width: 100%;
      height: 100%;
      border: none;
      outline: none;
      font-size: 17px;
      color: #fff8dc;
      background: #4a0604;
      padding: 0 100px 0 15px;
    }
    .search-box input::placeholder{
      color: #fff8dc;
    }
    .search-box .go-icon{
      position: absolute;
      right: 10px;
      top: 50%;
      transform: translateY(-50%);
      line-height: 60px;
      width: 70px;
      background: #4a0604;
      border: none;
      outline: none;
      color: #fff8dc;
      font-size: 20px;
      cursor: pointer;
    }
    .wrapper input[type="checkbox"]{
      display: none;
    }
    /* Dropdown Menu code start */
    .content .links ul{
      position: absolute;
      background: #4a0604;
      top: 80px;
      opacity: 0;
      visibility: hidden;
    }
    .content .links li:hover > ul{
      top: 70px;
      opacity: 1;
      visibility: visible;
      transition: all 0.3s ease;
      border-top: 3px solid black;
    }
    .content .links ul li a{
      display: block;
      width: 100%;
      line-height: 30px;
      border-radius: 0px!important;
    }
    .content .links ul ul{
      position: absolute;
      top: 0;
      right: calc(-100% + 8px);
    }
    .content .links ul li{
      position: relative;
    }
    .content .links ul li:hover ul{
      top: 0;
    }
    /* Responsive code start */
    @media screen and (max-width: 1250px){
      .wrapper nav{
        max-width: 100%;
        padding: 0 20px;
      }
      nav .content .links{
        margin-left: 30px;
      }
      .content .links li a{
        padding: 8px 13px;
      }
      .wrapper .search-box{
        max-width: calc(100% - 100px);
      }
      .wrapper .search-box input{
        padding: 0 100px 0 15px;
      }
    }
    @media screen and (max-width: 1029px){
      .wrapper .menu-icon{
        display: block;
      }
      .wrapper #show-menu:checked ~ .menu-icon i::before{
        content: "\f00d";
      }
      nav .content .links{
        display: block;
        position: fixed;
        background: #4a0604;
        height: 100%;
        width: 47.5%;
        top: 73.5px;
        left: -100%;
        margin-left: 0;
        max-width: 350px;
        overflow-y: auto;
        padding-bottom: 100px;
        transition: all 0.3s ease;
        border-top: 3px solid black;
        border-left: 3px solid black;
        border-right: 3px solid black;
      }
      nav #show-menu:checked ~ .content .links{
        left: 0%;
      }
      .content .links li{
        margin: 15px 20px;
      }
      .content .links li a,
      .content .links li label{
        line-height: 40px;
        font-size: 20px;
        display: block;
        padding: 8px 14px;
        cursor: pointer;
      }
      .content .links li a.desktop-link{
        display: none;
      }
  
   /* dropdown responsive code start */
   .content .links ul,
   .content .links ul ul{
     position: static;
     opacity: 1;
     visibility: visible;
     background: none;
     max-height: 0px;
     overflow: hidden;
   }
   .content .links #show-features:checked ~ ul,
   .content .links #show-services:checked ~ ul,
   .content .links #show-items:checked ~ ul{
     max-height: 100vh;
   }
   .content .links ul li{
     margin: 7px 20px;
   }
   .content .links ul li a{
     font-size: 18px;
     line-height: 30px;
     border-radius: 5px!important;
   }
  }
  
  /* Media verkleining links header */
  @media  screen and (max-width: 580px) {
    .content .links li a,  
    .content .links li label, 
    .content .links ul li a{
      font-size: 16px;
    }
  }
  @media  screen and (max-width: 520px) {
    .content .links li a,  
    .content .links li label, 
    .content .links ul li a{
      font-size: 14px;
    }
  }
  @media screen and (max-width: 400px){
   .wrapper nav{
     padding: 0 10px;
   }
   .content .logo a{
     font-size: 27px;
   }
   .wrapper .search-box{
     max-width: calc(100% - 70px);
   }
   .wrapper .search-box .go-icon{
     width: 30px;
     right: 0;
   }
   .wrapper .search-box input{
     padding-right: 30px;
   }
   .content .links li a,
   .content .links li label{
     font-size: 14px;
   }
  }
  /* Footer */
  /* Footer*/
  footer{
      width: 100%;
      position: absolute;
      top: 225%;
      background: linear-gradient(to right, #00093c, #2d0b00);
      color: #fff;
      padding: 100px 0 30px;
      border-top-left-radius: 125px;
      font-size: 13px;
      line-height: 20px;
  }
  .row{
      width: 85%;
      margin: auto;
      display: flex;
      flex-wrap: wrap;
      align-items: flex-start;
      justify-content: space-between;
  }
  .col{
      flex-basis: 25%;
      padding: 10px;
  }
  .col:nth-child(2), .col:nth-child(3){
      flex-basis: 15%;
  }
  .col h3{
      width: fit-content;
      margin-bottom: 40px;
      position: relative;
  }
  .email-id{
      width: fit-content;
      border-bottom: 1px solid #ccc;
      margin: 20px 0;
  }
  .col ul li{
      list-style: none;
      margin-bottom: 12px;
  }
  .col ul li a{
      text-decoration: none;
      color: #fff;
  }
  .social-icons ul{
      width: 40px;
      height: 40px;
      border-radius: 50%;
      text-align: center;
      line-height: 5px;
      font-size: 50px;
      margin-right: 100px;
      cursor: pointer;
      display: flex;
      gap: 20px;
  }
  .social-icons ul li a{
      position: relative;
      text-decoration: none;
      color: var(--clr);
      z-index: 10;
      font-size: 1em;
      transition: 0.5s;
  }
  .social-icons ul li:hover a{
      filter: drop-shadow(0 0 20px var(--clr)) drop-shadow(0 0 40px var(--clr)) drop-shadow(0 0 60px var(--clr));
  }
  .social-icons ul li:hover{
      z-index: 10000;
      transform: scale(0.75);
  }
  hr{
      width: 90%;
      border: 0;
      border-bottom: 1px solid #ccc;
      margin: 20px auto;
  }
  .logo{
    width: 50%;
    padding-bottom: 5%;
  }
  .copyright{
      text-align: center;
  }
  .underline{
      width: 100%;
      height: 5px;
      background: #767676;
      border-radius: 3px;
      position: absolute;
      top: 25px;
      left: 0;
      overflow: hidden;
  }
  .underline span{
      width: 15px;
      height: 100%;
      background: #fff;
      border-radius: 3px;
      position: absolute;
      top: 0;
      left: 10px;
      animation: moving 2s linear infinite;
  }
  @keyframes moving{
      0%{
          left: -20px;
      }
      100%{
          left: 100%;
      }
  }
  
  @media (max-width: 700px){
      footer{
          bottom: unset;
      }
      .col{
          flex-basis: 100%;
      }
      .col:nth-child(2), .col:nth-child(3){
          flex-basis: 100%;
      }
      .logo{
        width: 30%;
        padding-bottom: 5%;
      }
  }
  @media screen and (max-width: 1050px){
    footer{
      top: 200%;
    }
  }
  @media screen and (max-width: 725px){
    footer{
      top: 175%;
    }
  }
  @media screen and (max-width: 550px){
    footer{
      top: 135%;
    }
  }
  
  /* Widget */
  .widget{
    position: relative;
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-top: 7.5%;
  }
  
  /* Youtube embed */
  .youtube{
    width: 1000px;
    height: 562px;
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-top: 5%;
  }
  @media screen and (max-width: 700px){
    .widget{
      width: 75%;
      display: block;
      margin-left: auto;
      margin-right: auto;
    }
  }
  @media screen and (max-width: 1050px){
    .youtube{
      width: 700px;
      height: 393px;
    }
  } 
  @media screen and (max-width: 725px){
    .youtube{
      width: 500px;
      height: 281px;
    }
  }
  @media screen and (max-width: 550px){
    .youtube{
      width: 320px;
      height: 180px;
    }
  }